<script setup lang="ts">
import {
    NButton, NModal, NFlex, NSwitch, NSelect, NCascader,
    NForm, NFormItem, NInput, NRadioGroup, NRadio, NCheckbox
    , type FormInst, type FormItemRule
} from 'naive-ui';

import { useFeature } from "~/common/mixins/";
import { type SysUser } from '@/apis/models';
import { useMessage } from "naive-ui";

import { reactive, ref } from 'vue';
import { useUserStore, useDeptStore, usePostStore } from "@/store";
let userStore = useUserStore();
let postStore = usePostStore();
let deptStore = useDeptStore();


let message = useMessage();
let ruleFormRef = ref<FormInst>();

let emits = defineEmits(["handleQuery"])

let state = reactive({
    ruleForm: {} as SysUser,
    showModal: false,
    mentionLoading: false,
    isUsePhone: false
})

let labelWidth = ref(90)
let userRules = ref({
    fdFullname: {
        required: true,
        message: "请输入员工的真实姓名",
        trigger: "blur"
    },
    fdUsername: {
        required: true,
        message: "请输入员工的登录账号",
        trigger: "blur"
    },
    fdPhone: {
        required: true,
        message: "请输入员工的手机号码",
        trigger: "blur"
    },
    fdDeptId: {
        required: true,
        validator(_: FormItemRule, value: string) {
            if (!value) {
                return new Error('请选择所属部门')
            }
            return true
        },
        trigger: "change"
    },
    fdPostId: {
        required: true,
        validator(_: FormItemRule, value: string) {
            if (!value) {
                return new Error('请选择所属岗位')
            }
            return true
        },
        trigger: "change"
    },
    fdGroupId: {
        required: true,
        validator(_: FormItemRule, value: string) {
            if (!value) {
                return new Error('请选择所属用户组')
            }
            return true
        },
        trigger: "change"
    },
})


let onSubmit = (e: MouseEvent) => {
    e.preventDefault()
    ruleFormRef.value?.validate((errors) => {
        if (!errors) {

            let form = state.ruleForm;

            if (state.isUsePhone) {
                form.fdUsername = form.fdPhone;
            }

            UpdateOne(userStore, form).then((res: any) => {
                if (res.code == 200) {
                    message.success("数据修改成功");
                    closeDialog();
                }
            })
        }
        else {
            console.log(errors)
        }
    })
}

let { LoadList, UpdateOne } = useFeature()

import { useFunction } from "~/utils/function";
let { treeifyBin } = useFunction();

function openDialog(row: any) {
    state.ruleForm = JSON.parse(JSON.stringify(row));
    state.showModal = true;

    LoadList(deptStore, {}).then((res: any) => {
        let tree = treeifyBin(res)
        depts.value = tree;
    })

    LoadList(postStore, {}).then((res: any) => {
        posts.value = res.map((item: any) => {
            return {
                label: item.fdName,
                value: item.fdId
            }
        });
    })
}


let closeDialog = () => {
    emits('handleQuery');
    state.showModal = false;
}

let usernameRulesTemp = {};

let changeUsername = () => {
    let _isUsePhone = state.isUsePhone;
    let _userRules = userRules.value as any;
    if (!_isUsePhone) {//如果是使用电话当作用户名
        usernameRulesTemp = _userRules['fdUsername'];
        delete _userRules['fdUsername'];
    } else {
        _userRules['fdUsername'] = usernameRulesTemp;
    }
    state.isUsePhone = !_isUsePhone;
}


let depts = ref<any>([]);
let posts = ref<any>([]);

defineExpose({ openDialog });
</script>

<template>
    <div class="mc_1">
        <n-modal content-style="padding:10px;" style="width:54%;" title="添加用户" :show-icon="false" :bordered="true"
            v-model:show="state.showModal" preset="dialog">

            <template #default>
                <n-form inline require-mark-placement="left" ref="formRef" :rules="userRules" :model="state.ruleForm"
                    :label-width="labelWidth" label-placement="left">
                    <n-form-item path="fdFullname" label="员工姓名">
                        <n-input v-model:value="state.ruleForm.fdFullname" placeholder="请输入员工姓名"></n-input>
                    </n-form-item>
                    <n-form-item label="登录账号" path="fdUsername">
                        <n-input :disabled="state.isUsePhone" style="flex:1" v-model:value="state.ruleForm.fdUsername"
                            placeholder="请输入员工登录账号"></n-input>
                        <n-checkbox @click="changeUsername" style="margin-left:10px">使用手机号作登录账号</n-checkbox>
                    </n-form-item>
                    <n-form-item label="登录密码">
                        密码默认为miaozudichan + 当前年月，每个月密码动态变化
                    </n-form-item>
                    <n-form-item path="fdPhone" inline label="手机号">
                        <n-input v-model:value="state.ruleForm.fdPhone" placeholder="请输入员工手机号"></n-input>
                    </n-form-item>
                    <n-form-item path="fdEmail" inline label="员工邮箱">
                        <n-input v-model:value="state.ruleForm.fdEmail" placeholder="请输入员工邮箱"></n-input>
                    </n-form-item>
                    <n-form-item path="fdDeptId" inline label="所属部门">
                        <n-cascader v-model:value="state.ruleForm.fdDeptId" placeholder="请选择所属部门" :options="depts"
                            check-strategy="child" expand-trigger="click" />
                    </n-form-item>
                    <n-form-item path="fdPostId" inline label="所属岗位">
                        <n-select placeholder="请选择所属岗位" v-model:value="state.ruleForm.fdPostId" :options="posts" />
                    </n-form-item>
                    <n-form-item label="部门负责人" inline>
                        <n-switch v-model:value="state.ruleForm.fdIsDeptManager" :checked-value="1"></n-switch>
                    </n-form-item>
                    <n-form-item label="员工状态" inline>
                        <n-radio-group name="radiogroup" v-model:value="state.ruleForm.fdStatus">
                            <n-space>
                                <n-radio :value="1" key="1">
                                    启用
                                </n-radio>
                                <n-radio :value="0" key="0">
                                    禁用
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                    </n-form-item>
                    <n-form-item>
                        <n-flex style="width:fit-content;position:absolute;right:0;">
                            <n-button type="primary" @click="onSubmit">确定</n-button>
                            <n-button @click="state.showModal = false">取消</n-button>
                        </n-flex>
                    </n-form-item>
                </n-form>
            </template>
        </n-modal>
    </div>

</template>

<style scoped></style>
